import React from 'react';
import { HashRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
import { Suspense, lazy } from 'react';

// Lazy load components for code splitting
const Transfer = lazy(() => import('./views/transfer'));
const Home = lazy(() => import('./views/framework'));
const Square = lazy(() => import('./views/framework/components/square'));
const Preview = lazy(() => import('./views/preview'));
const SquareEnd = lazy(() => import('./views/agents/squareend'));
const Demo = lazy(() => import('./views/demo'));
const ErrorCatch = lazy(() => import('./views/common/errorCatch'));
const File = lazy(() => import('./views/framework/components/file'));
const Ceshi  = lazy(() => import('./views/agents/ceshi'));

function App() {
  return (
    <Router>
      <Suspense fallback={<div>Loading...</div>}>
        <Routes>
          <Route path="/" element={<Navigate to="/transfer" replace />} />
          
          <Route path="/transfer" element={<Transfer />} />
          
          <Route path="/home" element={<Home />}>
            <Route path="square" element={<Square />} />
            <Route path="file" element={<File />} />
          </Route>
          
          <Route path="/preview" element={<Preview />} />
          <Route path="/squareend" element={<SquareEnd />} />
          <Route path="/demo" element={<Demo />} />
          <Route path="/ceshi" element={<Ceshi />} />
          

          
          <Route path="*" element={<ErrorCatch />} />
        </Routes>
      </Suspense>

      
 
    </Router>
    
  );
}

export default App;
